Canvas element
The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bit map and does not have a built in scene graph. History Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component, powering applications like Dashboard widgets and the Safari browser. Later, it was adopted by Gecko browsers and OperaOpera 9.0 changelog and standardized by the WHATWG on new proposed specifications for next generation web technologies. In August 2009, text API and pixel manipulation were added and implemented in web browsers. Usage Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, games, and image composition. Example The following code creates a Canvas element in an HTML page: This text is displayed if your browser does not support HTML5 Canvas. Using JavaScript, you can draw on the canvas: var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); This code draws a red rectangle on the screen. Canvas vs Scalable Vector Graphics (SVG) SVG is an earlier standard for drawing shapes in browsers. However, it is at a fundamentally higher level because each drawn shape is remembered as objects in a scene graph or DOM, which are subsequently rendered to a bit map. This means that if attributes of the object are changed, the SVG can automatically re-render the scene. In the example above, once the rectangle is drawn, the fact that it was drawn is forgotten by the system. If its position was to be changed, the entire scene would need to be redrawn, including any objects that might have been covered by the rectangle. But in the equivalent SVG API, one could simply change the position attributes of the rectangle and the browser would determine how to repaint it. That said, it is also possible to create a canvas in layers and then recreate specific layers. The SVG DOM can be represented in static XML, and complex scenes created and manipulated with XML editing tools. The SVG scene graph enables events to be associated with objects, so one can create a rectangle with an onmousedown event. To get the same functionality with canvas one must manually match the coordinates of the mouse click with the coordinates of the drawn rectangle to determine whether it was clicked. Conceptually, the Canvas is a lower level protocol upon which SVG might be built. However, this is not (normally) the case—they are independent standards. The situation is complicated because there are scene graph libraries for Canvas, and SVG has some bit map manipulation functionality. Reactions At the time of its introduction the canvas element was met with mixed reactions from the web standards community. There have been arguments against Apple's decision to create a new proprietary element instead of supporting the SVG standard. There are other concerns about syntax e.g. the absence of a namespace.Ian Hickson remarks regarding canvas and other Apple extensions to HTML Intellectual property over canvas On March 14, 2007, WebKit developer Dave Hyatt forwarded an email from Apple's Senior Patent Counsel, Helene Plotka Workman[whatwg Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007], which stated that Apple reserved all intellectual property rights relative to WHATWG’s Web Applications 1.0 Working Draft, dated March 24, 2005, Section 10.1, entitled “Graphics: The bitmap canvas” [http://www.whatwg.org/specs/web-apps//#scs-dynamic Web Applications 1.0 Early Working Draft - Dynamic graphics: The bitmap canvas], but left the door open to licensing the patents should the specification be transferred to a standards body with a formal patent policy. This caused considerable discussion among web developers, and raised questions concerning the WHATWG's lack of a policy on patents in comparison to the W3C's explicit favoring of royalty-free licenses. Apple later disclosed the patents under the W3C's royalty-free patent licensing terms.HTML Working Group Patent Policy Status – Known Disclosures The disclosure means that Apple is required to provide royalty-free licensing for the patent whenever the Canvas element becomes part of a future W3C recommendation created by the HTML working group.W3C patent policy in use by HTML working group Support The element is currently supported by the latest versions of Mozilla Firefox, Google Chrome, Safari, and Opera. It is not natively implemented by Internet Explorer as of version 8 , though support is in development for Internet Explorer 9, however many of the Canvas element's features can be supported via JavaScript libraries that rely on either Adobe Flash, or more recently, Internet Explorer's inbuilt support for VML. See also * Cairo (graphics) * Comparison of layout engines (HTML5 Canvas) * Display PostScript * GDI+ * Processing (programming language)#Processing.js * Quartz 2D * SVG * Wii Opera SDK / HullBreach SDK - JavaScript 3D canvas library * WebGL References External links *Canvas description in WHATWG Web Applications draft specifications *Canvas reference page in Apple Developers Connection *Basic Canvas Tutorial on Opera Developer Community *Canvas tutorial and introductory page on Mozilla Developer center *Canvas Demos A comprehensive list of demos, tutorials and tools for the canvas element. *Wii Opera SDK 3D Canvas Library for Internet Gaming *An interactive blob Test your browser. *Canvas example using Gnuplot driver *w3 html5 canvas element *w3 html5 canvas 2d methods *Processing.js Category:HTML cs:Canvas de:Canvas (HTML-Element) es:Canvas fr:Canvas (HTML) it:Canvas (elemento HTML) ja:Canvas要素 pt:Canvas (Informática) ru:Canvas (HTML) uk:Canvas zh:Canvas (HTML元素)